
<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>
      <el-input clearable placeholder="请输入内容" class="search-main" v-model="params.carNumber"/>
      <span class="search-label">车主姓名：</span>
      <el-input clearable placeholder="请输入内容" class="search-main" v-model="params.personName"/>
      <span class="search-label">状态：</span>
      <el-select v-model="params.cardStatus">
        <el-option
        v-for="item in statusList"
        :key="item.value"
        :label="item.text"
        :value="item.value"
         />
      </el-select>
      <el-button type="primary" class="search-btn" @click="search">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="add">添加月卡</el-button>
      <el-button @click="delAllBtn">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">

      <el-table style="width: 100%" :data="cardList" @selection-change="delAll">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" :index="indexMethod"/>
        <el-table-column label="车主名称" prop="personName"/>
        <el-table-column label="联系方式" prop="phoneNumber"/>
        <el-table-column label="车牌号码" prop="carNumber"/>
        <el-table-column label="车辆品牌" prop="carBrand"/>
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate"/>
        <el-table-column label="状态" prop="cardStatus" :formatter="formStatus"/>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text">续费</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text" @click="editItem(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <!-- @size-change="handleSizeChange"：当页数变化的时候会触发该方法 -->
      <!-- @current-change="handleCurrentChange"：当前页变化的时候会触发该方法 -->
      <!-- :current-page="currentPage4"：表示当前页 -->
      <!-- :page-sizes="[100, 200, 300, 400]":设置每页的容量 -->
      <!-- :page-size="100":每一页的数据 -->
      <!-- layout="total, sizes, prev, pager, next, jumper":显示分页组件的功能 -->
      <!-- :total="400":显示总共有多少条数据 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[2, 4, 6,]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    <!-- 添加楼宇 -->
    <el-dialog
      title="添加楼宇"
      width="580px"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <!-- <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="addForm.floors" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="addForm.area" />
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="addForm.propertyFeePrice" />
          </el-form-item>
        </el-form> -->
      </div>
      <template #footer>
        <el-button size="mini">取 消</el-button>
        <el-button size="mini" type="primary">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { getCardListAPI,deleteCardAPI} from '@/api/card';
export default {
 data(){
  return{
    params:{
      page:1,
      pageSize:2,
      carNumber:'',
      personName:'',
      cardStatus:null
    },
    //月卡列表
    list:[],
    cardList:[],
    total:0,
    //状态列表
    statusList:[
      {
        value:null,//其中null代表全部
        text:'全部'
      },
      {
        value:0,
        text:'可用'
      },
      {
        value:1,
        text:'不可用'
      }
    ]
  }
 },
 created(){
  this.getCardList()
 },
 methods:{
 async delAllBtn(){
    // const a=[1,2,3,4]
    // console.log(a.join(','))
    //map()方法的功能：获取元素是对象的数组里面的某个字段的值并且以数组的方式返回
   const L= this.list.map(item => {
      return item.id
    })
    //  console.log(L)
    this.$confirm('是否确定删除月卡', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await deleteCardAPI(L.join(','))
          this.$message.success('批量删除成功')
      }).catch(() => {
          return
        })
       
  },
  delAll(val){
    console.log(val)
    this.list=val
  },
  editItem(id){
    console.log(id)
    this.$router.push({
      path:'/addCard',
      query:{
        id:id
      }
    })
  },
  delItem(id){
    this.$confirm('是否确定删除月卡', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
        await deleteCardAPI(id)

          this.$message({
            type: 'success',
            message: '月卡已删除'
          })
  }).catch(() => {
          return
        })
  },
  add(){
    this.$router.push('/addCard')
  },
   //查询方法
   search() {
     //查询的结果在第一页，所以要切换到第一页才能显示
     this.params.page = 1
     this.getCardList()
   },
  indexMethod(index){
//当前页之前的所有数据=当前页的之前的所有页数乘以容量
//(当前页-1)*容量
   return (this.params.page-1)*this.params.pageSize+index+1

  },
  handleSizeChange(val){
    //设置每页显示
    console.log(val)
    this.params.pageSize=val
    this.getCardList()
  },
  handleCurrentChange(val){
    this.params.page=val
    this.getCardList()
  },
  formStatus(row,column,cellValue,index){
   return cellValue==0?'可用':'不可用'
  },
    async getCardList() {
      const res = await getCardListAPI(this.params)
      // console.log(res)
      this.cardList = res.data.rows
      this.total = res.data.total
    },

  },


}
</script>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
